<template>

	<view class="page-bg">
		<view class="list-box pad-30">
			<view class="list">
				<view class="pad-30 bg-white radius20">
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">月份</view>
						<view class="color-text">{{info.month}}</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">是否结清</view>
						<view v-if="info.settle_status == 1" class="color-333"> 结清</view>
						<view v-else class="color-error">欠费</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">水表编号</view>
						<view class="color-text">{{info.water_meter_code}}</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">抄表前读数</view>
						<view class="color-text">{{info.last_number}} m³</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">抄表后读数</view>
						<view class="color-text">{{info.new_number}} m³</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">需支付金额</view>
						<view class="color-text">{{info.need_pay_amount}} 元</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">水费(不含滞纳金)</view>
						<view class="color-text">{{info.water_fee_base}} 元</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">滞纳金</view>
						<view class="color-text">{{info.late_fee}} 元</view>
					</view>
				</view>
			</view>
		</view>

		<view class="pad-left-right-30 mar-top-30">
			<view class="bg-white pad-20 radius20 text-center">
				<view class="flex centerY font-28 color-646464">
					<view class="flex-w">名称</view>
					<view class="flex-w">用水量 (m³)</view>
					<view class="flex-w widthB200">单价 (元/m³)</view>
					<view class="flex-w">费用 (元)</view>
				</view>
				<view class="mar-top-30">
					<view v-for="item in info.amount_details" :key="item.id" class="flex centerY font-28 mar-bottom-30">
						<view class="flex-w">{{item.name}}</view>
						<view class="flex-w">{{item.used}}</view>
						<view class="flex-w widthB200">{{item.final_price}}</view>
						<view class="flex-w">{{item.final_fee}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="button-bottom" v-if="info.settle_status == 2">
			<view class="button-style centerXY" @click="hanldeShowAmount(item)">
				<view class="mar-left-10">去缴费</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { waterMeterInfo } from '@/api/currency.js';
	import { onLoad } from '@dcloudio/uni-app';
	import { timeFormat } from '@/node_modules/uview-plus';


	const paging = ref(null);
	const list = ref([]);
	const param = ref({});

	onLoad((option) => {
		param.value = option;
		getWaterDetail();
	})

	// 打开充值弹窗
	const hanldeShowAmount = (item) => {
		uni.navigateTo({
			url: '/pages/recharge/recharge?id=' + param.value.monthId
		})
	}

	// 获取详情数据
	const info = ref({});
	const getWaterDetail = () => {
		waterMeterInfo({ id: param.value.id }).then(res => {
			if (res.code == 200) {
				info.value = res.data;
			}
		})
	}
</script>

<style scoped lang="scss">
	.page-bg {
		background: #F4F6F8;
		min-height: 100vh;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0rpx;
		z-index: 2;

		.button-style {
			padding: 20rpx 0;
			text-align: center;
		}
	}

	.widthB200 {
		flex: 0 0 180rpx; 
	}
</style>